/* 全局样式占位，可按需扩展 */
html, body, #app { height: 100%; }
body { margin: 0; background: #f6f7fb; }

/* 统一的卡片栅格与方块（tile）样式 */
.app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

/* 卡片方块统一高度、圆角与悬浮 */
.app-tile {
	height: 140px;
	border-radius: 10px;
	transition: box-shadow .2s ease, transform .2s ease;
}
.app-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
/* 让 el-card 的 body 撑满以实现固定高度布局 */
.app-tile .el-card__body {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 标题与描述统一风格 */
.tile-title {
	font-weight: 600;
	font-size: 16px;
	color: var(--el-text-color-primary);
}
.tile-desc {
	margin-top: 6px;
	color: var(--el-text-color-secondary);
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 统一内容容器：限制宽度，居中，统一内边距与最小高度 */
.content-container {
	/* 更宽，减少大屏留白 */
	max-width: 1280px;
	margin: 0 auto;
	padding: 12px;
	min-height: calc(100vh - 56px - 56px);
}

/* 调整主卡片在容器中的统一外边距和阴影风格（可按需） */
.content-container > .el-card,
.content-container .el-space > .el-card {
	border-radius: 10px;
	border: 1px solid #ebeef5;
	box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* 卡片头部更紧凑 */
.content-container :is(.el-card__header) {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f2f5;
}

/* 表格圆角和更紧凑的间距 */
.content-container :is(.el-table) { border-radius: 8px; overflow: hidden; }
.content-container :is(.el-table th, .el-table td) { padding: 10px 12px; }

/* 统一主卡片的最小高度，仅在列表类页面生效（.has-list） */
.content-container.has-list .el-card:first-of-type {
	min-height: 540px;
}

/* 处理大多数页面的结构：content-container > el-space > el-card */
.content-container.has-list > .el-space { width: 100%; }
.content-container.has-list > .el-space > .el-card {
	width: 100%;
	min-height: 540px;
}

/* 仪表盘恢复原样：在布局上加 is-wide 时，取消宽度与高度限制 */
.content-container.is-wide { max-width: 1440px; }
.content-container.is-wide .el-card:first-of-type,
.content-container.is-wide > .el-space > .el-card {
	min-height: auto;
}

@media (max-width: 768px) {
	.content-container .el-card:first-of-type {
		min-height: 420px;
	}
}
